<%@ include file="/pages/common/base.jsp"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Siyora Jewellery</title>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script>
			$(function() {
				$("form").validity(function() {
					$("#userName").require();
					$("#password").require();
					
		
				});
			});
		</script>
		
	</head>
	<body class="mainbody">
		<c:set var="validationMsg" value="${param.message}"/>
		<div class="mainContainer">
			<header class="header">
	        	<div class="companyLogo"><img src="${imageContext}/siyoraLOgo.jpg"/></div>        
	        </header>
	    	<section class="bodyContainer">
				<div class="wrapper">
	            	<div class="jewelBanner"><img src="${imageContext}/jewelImage.jpg"/></div>
			      
			        <form id="loginForm" method="post" action="${context}/login">
				   	<div id="login" class="login active" style="display:block;">
						<div class="divclear">
							<div class="signInHeadingTxt">Login</div>	
							<div class="hor_space_10"></div>
							<div class="divclear">   
								<div class="loginUserTxt">User Name :</div>
								<div class="loginUserTxt">
									<input type="text" aria-required="true" class="" id="userName" name="userName" placeholder="User Name" value="" autocomplete="off">
								</div>
							</div>	
							
							<div class="hor_space_10"></div>
							<div class="divclear">   
								<div class="loginUserTxt">Password :</div>
								<div class="loginUserTxt">
									<input type="password" aria-required="true" id="password" name="password" placeholder="Password" value="" autocomplete="off">
								</div>
							</div>
							<div class="hor_space_10"></div>
							<div id="validationMsg" Style="color:red">${validationMsg}</div>
							<!--  <div class="divclear">
								<span id="changePass" class="forgotPassTxt" ><a onclick="showAndHide('login','changePassword');">CHANGE PASSWORD ?</a></span>
						  	</div>
						  	 --><div class="divclear">
								<div class="signInLoginBtn"><a href=""><input type="submit" value="SIGN IN"/></a></div>
						  	</div>
						</div>
			     	</div> 
				   
	    			<div id="changePassword" class="forgot_password" style="display:none;">
						<div class="divclear">
							<div class="signInHeadingTxt">Change Password</div>	
							<div class="hor_space_10"></div>
							<div class="divclear">   
								<div class="forgotPassTxt">Confirm Password</div>
								<div class="forgotPassTxt">
									<input type="text" aria-required="true" id="confirm_pwd" name="confirm_pwd" placeholder="Confirm Password" value="" autocomplete="off">
								</div>
							</div>	
							
							<div class="hor_space_10"></div>
							<div class="divclear">   
								<div class="forgotPassTxt">New Password</div>
								<div class="forgotPassTxt">
									<input type="text" aria-required="true" id="new_pwd" name="new_pwd" placeholder="New Password" value="" autocomplete="off">
								</div>
							</div>	
							<div class="divclear">   
								<div class="forgotPassTxt">Re-Enter New Password</div>
								<div class="forgotPassTxt">
									<input type="text" aria-required="true" id="repeated_pwd" name="repeated_pwd" placeholder="Re-Enter New Password" value="" autocomplete="off">
								</div>
							</div>	
							<div class="hor_space_10"></div>
							<div class="divclear">
								<span id="loginPass" class="forgotPassTxt" ><a onclick="showAndHide('changePassword','login');">Login</a></span>
						  	</div>
								
						 	<div class="hor_space_10"></div>
						 	<div class="hor_space_10"></div>
							<div class="divclear">
								<div class="signInLoginBtn"><a href="">SUBMIT</a></div>
							</div>
						</div>
					</div>
	                 </form>
	                 
			        <div class="jewelleryPics">
			        	<div class="jewelleryImgFirst"><img src="${imageContext}/bangels.png"></div>
			            <div class="jewelleryImg"><img src="${imageContext}/rings.png"></div>
			            <div class="jewelleryImg"><img src="${imageContext}/earRings.png"></div>
			            <div class="jewelleryImg"><img src="${imageContext}/necklace.png"></div>
			            <div class="jewelleryImg"><img src="${imageContext}/kada.png"></div>
			        </div>
	      		</div>
	  		</section>
	  
		</div>
		<!--main container-->
		<footer class="footer">Copyright 2014 siyora jewellery</footer>
	</body>
</html>
